<template>
		<scroll-view scroll-y="true" style="width: 520rpx; height: 500rpx;" enable-flex="true">
			<view class="flex align-center px-3 pt-3" v-for="(item,index) in gifts" :key="index">
				<view style="width: 325rpx; background-image: linear-gradient(to right, #BCABB1, #65AAF0);" class="flex rounded-circle">
					<view class="p">
						<image :src="item.avatar || defaultAvatar" style="width:70rpx;height:70rpx;" class="rounded-circle"></image>
					</view>
					<view class="flex-1 flex flex-column justify-center">
						<text class="text-white font">{{item.username}}</text>
						<text class="text-white font-sm">送{{item.gift_name}}</text>
					</view>
					<view class="p">
						<image :src=item.gift_image style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image>
					</view>
				</view>
				<text class="text-warning font-lg m-1">x {{item.num}}</text>
			</view>
		</scroll-view>

</template>

<script>
	export default{
		data(){
			return{
				defaultAvatar:"https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg",
				gifts: []
			}
		},
		methods:{
			send(gift){
				this.gifts.push(gift)
				this.autoHide()
			},
			autoHide(){
				if(this.gifts.length){
					let timer = setTimeout(()=>{
						this.gifts.splice(0,1)
					}, 5000)
				}
			}
		}
	}
</script>

<style>
</style>